<template>
  <div class='xx'>
    <m-header-title headerTitle="projectDetail" @goBack='goBack'/>
    <m-pull-refresh @refReshSend='refReshSend'>
      <template v-slot>
          <div class='pro-detail'>
              <p class='title'>项目名称：米-新闻</p>
              <p>项目目的：熟悉vue3最新版本技术</p>
              <p>ps:由于接口调用次数有限(每日100次)，必须要做缓存处理（首页新闻列表数据/新闻详情数据），每次获取数据前，先查看vuex缓存是否有此type项对应页码下的数据</p>
            <ul>
                <li>有->取vuex缓存对应页数列表数据</li>
                <li>无->取接口数据</li>
            </ul>
            <p>新闻详情页也是如此，需要使用vuex进行缓存/查看/取出对应数据，不过也考虑到后期数据总是不变的情况，所以在【我的】模块下增加【清空缓存】功能</p>
            <p>项目虽小，五脏俱全，使用技术还是比较多的</p>
            <p>Vite2、Vue3(setUp)、Ts、Vue-router、Axios、Vuex、国际化(i18n)、env环境配置、postcss-rem适配</p>
            <p>总结： 前后端都是从新开发，此项目开发完成之后，后台数据完全可以进行复用，用作其他项目。本人还会继续组织其他开源项目，挑战各种前后端技术栈，包括但不限于（Vue、React、Angular、小程序）等等...请持续关注-米白小站 </p>
          </div>
      </template>
    </m-pull-refresh>
  </div>
</template>

<script lang="ts">
import { useI18n } from '@/i18nPlugin'
import { toRefs, defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router'
import {MHeaderTitle, MPullRefresh} from '@/components'


export default defineComponent({
  nem: 'ProjectDetail',
  components: {
    MHeaderTitle,
    MPullRefresh
  },
  setup: () => {
    const i18n = useI18n()
    const router = useRouter()
    const data = reactive({})
    const goBack =()=> {
        router.replace(`/User`)
    }
    return { ...toRefs(data), i18n,goBack }
  },
})
</script>

<style scoped lang="scss">
.pro-detail {
    width: 95%;
    margin:50px auto;
    .title {
        color: #333;
        font-size: 14px;
        text-align: center;
        margin-bottom: 20px;
    }
    p,li {
        font-size: 14px;
        color: #333;
        margin-bottom: 10px;
    }
}
</style>
